<template>
  <el-pagination
    class="table-pagination"
    :background="true"
    v-model:current-page="pageParams.pi"
    :page-sizes="pageSizes"
    :hide-on-single-page="hideOnSinglePage"
    v-model:page-size="pageParams.ps"
    :layout="'total, sizes, prev, pager, next' + (showJumper ? ',jumper' : '')"
    :total="total"
    @current-change="change('pi')"
    @size-change="change('ps')"
  />
</template>

<script lang="ts" setup name="el-st-date">
import { TPagination } from "../interface";
import { reactive, computed } from "vue";
const props = defineProps<TPagination>();
const pageParams = reactive({
  pi: props.pi,
  ps: props.ps
});
const total = computed(() => {
  return props.total;
});
const emits = defineEmits(["change", "update:pi", "update:ps"]);
const change = (key: string) => {
  if (key === "pi") {
    emits("update:pi", pageParams.pi);
  } else {
    emits("update:ps", pageParams.ps);
  }
  emits("change", { pi: pageParams.pi, ps: pageParams.ps });
};
</script>
<style>
.table-pagination {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: var(--ba-bg-color-overlay);
  padding: 13px 15px;
  justify-content: flex-end;
}
</style>
../interface ../interface
